<template>
  <!-- 放置一个图标 -->
  <div>
    <svg-icon :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'" class="fullscreen" @click="toggleScreen" />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false, // 不全屏
      isClick: false // 是否点击进入全屏
    }
  },
  mounted() {
    // 点击的就走点击....
    // 用户非得按f11, 就让用户用f11退出
    // 不用试这种混合的了...

    // 检测点击的方式->esc按键退出全屏的改变事件/f11退出
    // f11进入全屏->只能用f11退出
    screenfull.on('change', () => {
    //   console.log(screenfull.isFullscreen) // true->当前为全屏, false->已经退出全屏
      this.isFullScreen = screenfull.isFullscreen
    })

    // fn+F11 -> 进入全屏可以凭借这个键盘事件可以做
    // 退出全屏这个键盘事件不走
    window.addEventListener('keyup', (ev) => {
      this.isClick = false // 按键方式进入, 非点击
      if (ev.key === 'F11') {
        this.isFullScreen = true
      }
    })

    // 退出全屏用这个
    window.onresize = () => {
      if (this.isClick === true) return
      // 获取浏览器现在全屏的状态, 为何要写一些一堆
      // 不同的浏览器获取的方式不一样, 前面有值就用前面的, 前面无值代表现在代码运行
      // 所在服务器不支持这个属性尝试往后取值
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      // isFull-全屏, isFullScreen也记录的当前状态为全屏 -> 检测到了浏览器窗口改变
      if (isFull && this.isFullScreen === true) {
        this.isFullScreen = false // 变量改成false->退出了全屏(按键方式)->图标
      }
    }
  },
  methods: {
    //   全屏和非全屏之间的切换
    toggleScreen() {
      screenfull.toggle()
      // 切换全屏与否状态
      this.isFullScreen = !this.isFullScreen
      this.isClick = true
    }
  }
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
